<template>
	<view class="content">
		<view v-show="loading === false">
			<view class="scroll-content">
				<view class="introduce-section">
					<text class="title">{{detailData.title}}</text>
					<view class="introduce">
						<view class="introduce_img">
							<!-- <image v-if="detailData.media_user.avatar_url"  :src="'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+detailData.media_user.avatar_url"  mode=""></image> -->
							<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1575568780,3963509117&fm=15&gp=0.jpg" mode=""></image>
						</view>
						<view class="introduce_tltle">
							<view>{{detailData.copy_from}}</view>
							<text>{{detailData.view_count}}{{$t('detailss.read')}}</text>
							<text>{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', detailData.publish_time):utils.friendlyDate(detailData.publish_time) }}</text>
						</view>
						<button @click="followClock" style="padding: 10rpx 40rpx;" type="error" size="medium">{{detailData.follow===true?$t('video.concerned'):$t('video.follow')}}</button>
					</view>
					<!-- <rich-text class="txt_content" :nodes="detailData.content"></rich-text> -->
					<u-parse class="txt_content" :html="detailData.content" :selectable="true" :imgtap="detailData.cover" :lazy-load="true"></u-parse>
					<!-- 点赞分享收藏 -->
					<view class="actions">
						<view class="action-item" @click="praiseClick">
							<u-icon class="yticon" :name="detailData.praise===true?'thumb-up-fill':'thumb-up'" color="#b4b4b4" size="50"></u-icon>
							<text>{{detailData.praise_count}}</text>
						</view>
						<view class="action-item" @click="show = true">
							<u-icon class="yticon" name="share" color="#b4b4b4" size="50"></u-icon>
							<text>{{$t('detailss.share')}}</text>
						</view>
						<view class="action-item" @click="favoriteClick">
							<u-icon class="yticon active" :name="detailData.favorite===true?'star-fill':'star'" :color="detailData.favorite===true?'#ec706b':'#b4b4b4'"
							 size="50"></u-icon>
							<text>{{detailData.favorite===true?$t('detailss.collected'):$t('detailss.rollection')}}</text>
						</view>
					</view>
				</view>

				<view class="container">
					<!-- 推荐 -->
					<view class="s-header">
						<text class="tit">{{$t('detailss.related')}}</text>
					</view>
					<view class="rec-section" v-for="item in newsList" :key="item.id" @click="loadNewsList(item.news_id)">
						<view class="rec-item">
							<view class="left">
								<text class="title">{{item.title}}</text>
								<view class="bot">
									<text class="author">{{item.copy_from}}</text>
									<text class="time">{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', item.join_time):utils.friendlyDate(item.join_time) }}</text>
								</view>
							</view>
							<view class="right" v-if="item.cover.length > 0">
								<image :src="'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+item.cover[0].url" class="img" mode="aspectFill"></image>
							</view>
						</view>
					</view>

					<!-- 评论 -->
					<view class="s-header">
						<text class="tit">{{$t('detailss.comments')}}</text>
					</view>
					<view class="evalution">
						<view v-for="(item, index) in evaList" :key="index" class="eva-item">
							<image :src="item.media_user.avatar_url" mode="aspectFill"></image>
							<view class="eva-right">
								<text>{{item.media_user.name}}</text>
								<view class="zan-box">
									<text>{{item.praise_count}}</text>
									<u-icon @click="evalutionClick(item,index)" class="yticon" :name="item.praise===true?'thumb-up-fill':'thumb-up'"
									 color="#b4b4b4" size="35"></u-icon>
								</view>
								<text class="content">{{item.content}}</text>
								<view class="box-bouute">
									<text>{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', item.create_time):utils.friendlyDate(item.create_time) }}</text>
									<text @click="getrlhddata(item.comment_id)" v-show="item.reply_count>=1" class="eve-box">{{item.reply_count}}{{$t('detailss.reply')}}</text>
									<text @click="replClick(item)" v-show="item.reply_count==0" class="eve-box">{{$t('detailss.reply')}}</text>
									<u-icon v-if="item.media_user.user_id==userId" @click="delionClick(item,index)" class="delicon" name="close"
									 color="#b4b4b4" size="20"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载评论 -->
				<view class="wrap" style="margin-bottom: 100rpx;">
					<u-loadmore :status="status" icon-type="iconType" :load-text="$t('detailss.loadText')" />
				</view>
			</view>
			<!-- 分享 -->
			<u-popup v-model="show" mode="bottom" closeable length="20%">
				<view class="showqqwe">
					<view @click="shareClick('qq')">
						<u-icon name="qq-circle-fill" color="#ffba2d" size="150"></u-icon>
						<text>QQ</text>
					</view>
					<view @click="shareClick('wx')">
						<u-icon name="weixin-circle-fill" color="#00d100" size="150"></u-icon>
						<text>{{$t('detailss.WeChat')}}</text>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 回复评论 -->
		<u-popup v-model="commentshow" mode="bottom" closeable border-radius="20" length="70%">
			<view style="text-align: center;font-size: 35rpx;font-weight: 600;margin-top: 10rpx;">{{$t('detailss.replydetails')}}</view>
			<view class="eva-item" style="border: 0;">
				<image :src="replydataList.comment.media_user.avatar_url" mode="aspectFill"></image>
				<view class="eva-right">
					<text>{{replydataList.comment.media_user.name}}</text>
					<view class="zan-box">
						<text>{{replydataList.comment.praise_count}}</text>
						<u-icon @click="evalutionClick(replydataList.comment)" class="yticon" :name="replydataList.comment.praise===true?'thumb-up-fill':'thumb-up'"
						 color="#b4b4b4" size="35"></u-icon>
					</view>
					<text class="content">{{replydataList.comment.content}}</text>
					<view>
						<text>{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', replydataList.comment.create_time):utils.friendlyDate(replydataList.comment.create_time) }}</text>
					</view>
				</view>
			</view>
			<scroll-view lower-threshold="60" class="scroll-view_H" scroll-y @scrolltolower="scrolltolower">
				<view style="color: #000000;font-weight: 600;font-size: 33rpx;margin-left: 30rpx;">{{$t('detailss.toAll')}} <text
					 style="margin-left: 10rpx;color: #7a7a7a;font-weight: 300;">{{replydataList.total}}</text></view>
				<view v-for="(item, index) in replydataList.reply_list" :key="index" class="eva-item">
					<image :src="item.media_user.avatar_url" mode="aspectFill"></image>
					<view class="eva-right">
						<text>{{item.media_user.name}}</text>
						<view class="zan-box">
							<text>{{item.praise_count}}</text>
							<u-icon @click="evalutionClick(item,index)" class="yticon" :name="item.praise===true?'thumb-up-fill':'thumb-up'"
							 color="#b4b4b4" size="35"></u-icon>
						</view>
						<text class="content">{{item.content}}</text>
						<view class="box-bouute">
							<text>{{$i18n.locale=='en'?utils.timeTodate('m-d H:i', item.create_time):utils.friendlyDate(item.create_time) }}</text>
							<text @click="replClick(item)" v-show="item.reply_count==0" class="eve-box">{{$t('detailss.reply')}}</text>
							<u-icon v-if="item.media_user.user_id==userId" @click="delionClick(item,index)" class="delicon" name="close"
							 color="#b4b4b4" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view style="height: 100px;"></view>
			</scroll-view>
			<view class="bottom">
				<view class="input-box">
					<u-icon name="chat" color="#bcbabb" size="35"></u-icon>
					<input v-model="add_content" cursor-spacing="10" class="input" type="text" :placeholder="$t('detailss.commenton')" placeholder-style="color:#adb1b9;" />
				</view>
				<text @click="contentClick" class="confirm-btn">{{$t('detailss.publish')}}</text>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 底部详情 -->
		<view class="bottom">
			<view class="input-box">
				<u-icon name="chat" color="#bcbabb" size="35"></u-icon>
				<input v-model="add_content" cursor-spacing="10" class="input" type="text" :placeholder="$t('detailss.commenton')" placeholder-style="color:#adb1b9;" />
			</view>
			<text @click="contentClick" class="confirm-btn">{{$t('detailss.submit')}}</text>
		</view>
		<ygcComment ref="ygcComment" :placeholder="$t('detailss.reply')+ commentList.name" @pubComment="pubComment"></ygcComment>
		<!-- 加载图标 -->
		<mixLoading class="mix-loading" v-if="loading"></mixLoading>
	</view>
</template>

<script>
	import {
		getToken,
		getLanguage
	} from '@/util/tokeCookien.js'
	import utils from '@/components/shoyu-date/utils.filter.js';
	import mixLoading from '@/components/mix-loading/mix-loading';
	import ygcComment from './ygc-comment.vue';
	export default {
		components: {
			mixLoading,
			ygcComment
		},
		data() {
			return {
				replySize: 5, //获取回复条数
				replydataList: {
					total: 0,
					comment: {
						"comment_id": 74,
						"content": "第一天起低落",
						"create_time": 1594693495,
						"praise": false,
						"praise_count": 0,
						"media_user": {
							"name": "wmamdin123",
							"avatar_url": null,
						}
					}
				}, //回复内容
				commentList: {
					comment_id: '',
					name: ''
				}, //储存回复评论id及回复name和
				index: 0,
				userId: "", //用户id
				commentshow: false, //弹出回复评论层
				add_content: '', //评论
				show: false, //弹出分享层
				utils: utils,
				news_id: 0, //获取到的新闻id
				loading: true,
				detailData: {}, //获取到的内容
				newsList: [], //推荐列表
				evaList: [], //评论
				status: 'loadmore',
				iconType: 'flower',
				page_size: 5, //每页显示多少条数据
				page_index: 0, //当前第几页
			}
		},
		onLoad(options) {
			/* this.$i18n.locale == 'en' ? uni.setNavigationBarTitle({
				title: 'Details'
			}) : uni.setNavigationBarTitle({
				title: '详情'
			}); */
			this.userId = getToken().uid
			this.news_id = options.news_id;
			this.loadNewsList();
		},
		//然后在对应的页面就能使用
		onReachBottom() {
			this.loadEvaList();
		},
		methods: {
			//删除评论
			delionClick(item, index) {
				const _this = this
				uni.showModal({
					content: _this.$i18n.messages[_this.$i18n.locale].pressrelease.delcomment,
					success: function(res) {
						if (res.confirm) {
							let URL_user = '/user/comment-delete/' + item.comment_id
							console.log(URL_user)
							_this.$myRequest({
									url: URL_user,
									header: {},
									data: {}
								}).then(function(response) {
									console.log(response)
									if (response.code == 200) {
										_this.commentshow == true ? _this.replydataList.reply_list.splice(index, 1) : _this.evaList.splice(index,
											1)
										_this.$refs.uToast.show({
											title: _this.$i18n.messages[_this.$i18n.locale].pressrelease.delok,
											type: 'success'
										})
										_this.loadEvaList()
									}
								})
								.catch(function(error) {
									console.log(error);
								});
						}
					}
				});
			},
			//点击回复
			replClick(item) {
				this.commentList.comment_id = item.comment_id
				this.commentList.name = item.media_user.name
				this.$refs.ygcComment.toggleMask('show')
			},
			//输入评论
			async pubComment(commentContent) {
				this.$refs.ygcComment.toggleMask(); //点击发表后执行关闭
				if (commentContent != '') {
					const res = await this.$myRequest({
						url: '/user/comment-add',
						method: 'post',
						header: {},
						data: {
							content: commentContent,
							newsId: this.news_id,
							replyTo: this.commentList.comment_id
						}
					})
					console.log(res)
					if (res.code == 200) {
						this.page_index = 0
						this.commentList.comment_id = ''
						this.getreplylist(this.replydataList.comment.comment_id)
						this.loadEvaList()
						this.$refs.uToast.show({
							title: this.$i18n.messages[this.$i18n.locale].pressrelease.successfully,
							type: 'success'
						})
					}

				}
				this.$refs.ygcComment.content = '';
			},
			//监听回复详情触底
			scrolltolower(e) {
				this.replySize = this.replySize + 5
				this.getreplylist(this.replydataList.comment.comment_id)
			},
			// 获取评论回复列表
			async getreplylist(comment_id) {
				const _this = this
				let url_userid = '/news/get-reply-list/' + comment_id + '/' + this.replySize + '/' + this.page_index
				const res = await this.$myRequest({
					url: url_userid,
					header: {}
				})
				this.replydataList = res.data
				this.commentList.comment_id = comment_id
			},
			//点击回复
			getrlhddata(comment_id) {
				this.commentshow = true
				this.replySize = 5
				this.getreplylist(comment_id)
			},
			//点赞评论
			async evalutionClick(item, index) {
				const res = await this.$myRequest({
					url: '/user/praise',
					method: 'post',
					header: {},
					data: {
						info_id: item.comment_id,
						type: 2
					}
				})
				let operation = ''
				res.data.operation == 1 ? operation = this.$i18n.messages[this.$i18n.locale].pressrelease.Likeok : operation =
					this.$i18n.messages[this.$i18n.locale].pressrelease.CancelLikes
				this.detailData.praise_count = res.data.praise_count
				this.$refs.uToast.show({
					title: operation,
					type: 'success'
				})
				item.praise_count = res.data.praise_count
				item.praise = !item.praise
			},
			//点赞文章
			async praiseClick() {
				const res = await this.$myRequest({
					url: '/user/praise',
					method: 'post',
					header: {},
					data: {
						info_id: this.news_id,
						type: 1
					}
				})
				let operation = ''
				res.data.operation == 1 ? operation = this.$i18n.messages[this.$i18n.locale].pressrelease.Likeok : operation =
					this.$i18n.messages[this.$i18n.locale].pressrelease.CancelLikes
				this.detailData.praise_count = res.data.praise_count
				this.$refs.uToast.show({
					title: operation,
					type: 'success'
				})
				this.detailData.praise = !this.detailData.praise
			},
			//添加收藏
			async favoriteClick() {
				const res = await this.$myRequest({
					url: '/user/favorite',
					method: 'post',
					header: {},
					data: {
						info_id: this.news_id,
						type: 1
					}
				})
				let operation = ''
				res.data.operation == 1 ? operation = this.$i18n.messages[this.$i18n.locale].pressrelease.Collectionok : operation =
					this.$i18n.messages[this.$i18n.locale].pressrelease.CanceCollection
				this.$refs.uToast.show({
					title: operation,
					type: 'success'
				})
				this.detailData.favorite = !this.detailData.favorite
			},
			//添加评论 
			async contentClick() {
				if (this.add_content == '') return
				const res = await this.$myRequest({
					url: '/user/comment-add',
					method: 'post',
					header: {},
					data: {
						content: this.add_content,
						newsId: this.news_id,
						replyTo: this.commentList.comment_id || 0
					}
				})
				console.log(res)
				if (res.code == 200) {
					this.add_content = ''
					this.page_index = 0
					this.commentList.comment_id = ''
					this.loadEvaList()
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.successfully,
						type: 'success'
					})
				}

			},
			//关注
			async followClock() {
				const res = await this.$myRequest({
					url: '/user/follow',
					method: 'post',
					header: {},
					data: {
						up_uid: this.detailData.media_user.user_id
					}
				})
				if (res.code == 200) {
					let operation = ''
					res.data.operation == 1 ? operation = this.$i18n.messages[this.$i18n.locale].pressrelease.Focusok : operation =
						this.$i18n.messages[this.$i18n.locale].pressrelease.CancelFocus
					this.$refs.uToast.show({
						title: operation,
						type: 'success'
					})
					this.detailData.follow = !this.detailData.follow
				} else {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.unknownerror,
						type: 'error'
					})
				}
				console.log(res)
			},
			//分享
			shareClick(type) {
				const _this=this
				let shareType=0
				if(this.detailData.cover.length==0){
					shareType=1
				}
				let deta_url =
					`http://www.aseantop.net/from=singlemessage#/dm/videoDetail?vid=${this.news_id}&type=2&from=app&langid=${getLanguage()}`
				if (type == 'qq') {
					uni.share({
						provider: 'qq',
						type: 1,
						scene: "WXSenceTimeline", 
						href:deta_url,
						title: this.detailData.title,
						summary: this.detailData.abstracts, 
						//imageUrl: res.tempFilePath, 
						success: function(response) {
							console.log("success:" + JSON.stringify(response));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: _this.$i18n.messages[_this.$i18n.locale].detailss.Failedshare,
								position: 'bottom'
							})
						}
					})
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: shareType,
						href: deta_url,
						title: this.detailData.title,
						summary: this.detailData.abstracts,
						imageUrl: 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+this.detailData.cover[0].url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: this.$i18n.messages[this.$i18n.locale].detailss.Failedshare,
								position: 'bottom'
							})
						}
					});
				}
			},
			//获取推荐列表
			async loadNewsList(id) {
				if (id) {
					this.news_id = id
					this.loading = true;
				}
				const res = await this.$myRequest({
					url: '/news/get-news-detail/' + this.news_id,
					header: {}
				})
				const _this = this
				setTimeout(() => {
					_this.detailData = res.data.detail
					_this.newsList = res.data.list
					uni.setNavigationBarTitle({
						title: res.data.detail.title
					});
					_this.loading = false;
				},500)
				this.loadEvaList();
			},
			//获取评论列表
			async loadEvaList() {
				const _this = this
				/* if (this.evaList.length >= 3) return; */
				this.status = 'loading';

				let url_userid = '/news/get-comment-list/' + this.news_id + '/' + this.page_size + '/' + this.page_index
				const res = await this.$myRequest({
					url: url_userid,
					header: {}
				})
				setTimeout(() => {
					this.evaList = []
					for (const item of res.data) {
						this.evaList.push(item)
					}
					if (this.page_size >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
				this.page_size = this.page_size + 5
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
	}

	.video-wrapper {
		height: 422rpx;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.scroll {
		flex: 1;
		position: relative;
		background-color: #f8f8f8;
		height: 0;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;
	}

	/* 简介 */
	.introduce-section {
		display: flex;
		flex-direction: column;
		padding: 20rpx 30rpx;
		background: #fff;
		line-height: 1.5;

		.txt_content {
			p {
				font-size: 35rpx;
			}

			img {
				width: 100%;
			}
		}

		.title {
			font-size: 45rpx;
			color: #303133;
			margin-bottom: 16rpx;
		}

		.introduce {
			margin-bottom: 30rpx;
			display: flex;
			font-size: 26rpx;
			color: #909399;
			justify-content: center; //子元素水平居中
			align-items: center; //子元素垂直居中

			.introduce_img {
				flex: 1;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50px;

				image {
					border-radius: 50px;
					width: 100rpx;
					height: 100rpx;
				}
			}

			.introduce_tltle {
				text {
					margin-right: 16rpx;
				}

				margin-left: 30rpx;
				flex: 4;

				view {
					font-weight: 600;
					font-size: 40rpx;
					color: #000000;
				}
			}

			button {
				flex: 2;
				height: 60rpx;
				line-height: 45rpx;
				font-size: 30rpx;
				background-color: #ed4141;
				color: #fff;
			}
		}
	}

	/* 点赞等操作 */
	.actions {
		display: flex;
		justify-content: space-around;
		align-items: center;
		line-height: 1.3;
		padding: 10rpx 40rpx 20rpx;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #999;
		}

		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			font-size: 52rpx;

			&.reverse {
				position: relative;
				top: 6rpx;
				transform: scaleY(-1);
			}

			&.active {
				color: #ec706b;
			}
		}

		.icon-fenxiang2 {
			font-weight: bold;
			font-size: 36rpx;
		}

		.icon-shoucang {
			font-size: 44rpx;
		}
	}

	.s-header {
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		color: #303133;
		background: #fff;
		margin-top: 16rpx;

		&:before {
			content: '';
			width: 0;
			height: 40rpx;
			margin-right: 24rpx;
			border-left: 6rpx solid #ec706b;
		}
	}

	/* 推荐列表 */
	.rec-section {
		background-color: #fff;

		.rec-item {
			display: flex;
			padding: 20rpx 30rpx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 30rpx;
				right: 0;
				bottom: 0;
				height: 0;
				border-bottom: 1px solid #eee;
				transform: scaleY(50%);
			}
		}

		.left {
			flex: 1;
			padding-right: 10rpx;
			overflow: hidden;
			position: relative;
			padding-bottom: 52rpx;

			.title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 32rpx;
				color: #303133;
				line-height: 44rpx;
			}

			.bot {
				position: absolute;
				left: 0;
				bottom: 4rpx;
				font-size: 26rpx;
				color: #909399;
			}

			.time {
				margin-left: 20rpx;
			}
		}

		.right {
			width: 220rpx;
			height: 140rpx;
			flex-shrink: 0;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

		}
	}

	.scroll-view_H {
		height: 80%;
	}

	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20rpx 0;
	}

	.eva-item {
		display: flex;
		padding: 20rpx 30rpx;
		position: relative;
		border-bottom: 1px solid #eee;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24rpx;
		}

		&:after {
			content: '';
			position: absolute;
			left: 30rpx;
			bottom: 0;
			right: 0;
			height: 0;
			transform: translateY(50%);
		}

		&:last-child:after {
			border: 0;
		}
	}

	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 30rpx;
		color: #909399;
		position: relative;

		.delicon {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}

		.box-bouute {
			font-size: 25rpx;
			color: #212121;
		}

		.zan-box {
			display: flex;
			align-items: base-line;
			position: absolute;
			top: 10rpx;
			right: 10rpx;

			.yticon {
				margin-left: 8rpx;
			}
		}

		.eve-box {
			padding: 5rpx 15rpx;
			background-color: #f4f4f4;
			margin-left: 20rpx;
			border-radius: 50rpx;
		}

		.content {
			font-size: 30rpx;
			color: #333;
			padding-top: 20rpx;
		}
	}

	/* 底部弹框 */
	.showqqwe {
		display: flex;
		margin-top: 50rpx;

		view {
			text-align: center;
			flex: 1;
			justify-content: center;

			text {
				display: block;
			}
		}
	}

	/* 底部 */
	.bottom {
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 30rpx;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, .04);
		z-index: 1;

		.input-box {
			display: flex;
			align-items: center;
			flex: 1;
			height: 60rpx;
			background: #f2f3f3;
			border-radius: 100px;
			padding-left: 30rpx;

			.icon-huifu {
				font-size: 28rpx;
				color: #909399;
			}

			.input {
				padding: 0 20rpx;
				font-size: 28rpx;
				color: #303133;
			}
		}

		.confirm-btn {
			font-size: 30rpx;
			padding-left: 20rpx;
			color: #0d9fff;
		}
	}
</style>
